<!DOCTYPE html>
<html>
    <head>
        <title>Clear Key Play Two Videos At Same Time</title>
        <script src="encrypted-media-utils.js"></script>
        <script src="../../resources/testharness.js"></script>
        <script src="../../resources/testharnessreport.js"></script>
    </head>
    <body>
        <video id="testVideo"></video>
        <video id="secondVideo"></video>
        <script>
            // As this code doesn't wait for the 'message' event to simplify
            // the code, specify the key ID and key used by the encrypted
            // content.
            var keyId = stringToUint8Array('0123456789012345');
            var rawKey = new Uint8Array([0xeb, 0xdd, 0x62, 0xf1, 0x68, 0x14, 0xd2, 0x7b,
                                         0x68, 0xef, 0x12, 0x2a, 0xfc, 0xe4, 0xae, 0x3c]);
            var content = '../content/test-encrypted.webm';

            promise_test(function(test)
            {
                var promises = [
                    play_video_as_promise(document.getElementById('testVideo'), content),
                    play_video_as_promise(document.getElementById('secondVideo'), content)
                ];
                return Promise.all(promises);
            }, 'Play two videos at the same time.');

            function play_video_as_promise(video, content)
            {
                return navigator.requestMediaKeySystemAccess('org.w3.clearkey', getConfigurationForFile(content)).then(function(access) {
                    return access.createMediaKeys();
                }).then(function(mediaKeys) {
                    return video.setMediaKeys(mediaKeys);
                }).then(function(result) {
                    video.src = content;
                    video.play();
                    return wait_for_encrypted_message(video);
                }).then(function(result) {
                    return wait_for_timeupdate_message(video);
                });
            };

            function wait_for_encrypted_message(video)
            {
                var encryptedEventCount = 0;
                return new Promise(function(resolve) {
                    video.addEventListener('encrypted', function listener(e) {
                        // The same decryption key is used by both the audio
                        // and the video streams so only create a session once.
                        // Create the session on the second event. This also
                        // ensures we see both events.
                        if (++encryptedEventCount != 2)
                            return;
                        video.removeEventListener('encrypted', listener);

                        var mediaKeySession = video.mediaKeys.createSession();
                        mediaKeySession.generateRequest(e.initDataType, e.initData).then(function(result) {
                            // Don't bother waiting for the 'message' event.
                            // Just call update() since we know the keyId
                            // needed.
                            var jwkSet = stringToUint8Array(createJWKSet(createJWK(keyId, rawKey)));
                            return mediaKeySession.update(jwkSet);
                        }).then(function(result) {
                            resolve(result);
                        });
                    });
                });
            };

            function wait_for_timeupdate_message(video)
            {
                return new Promise(function(resolve) {
                    video.addEventListener('timeupdate', function listener(e) {
                        if (e.target.currentTime < 0.2)
                            return;
                        video.removeEventListener('timeupdate', listener);
                        resolve(e);
                    });
                });
            };
        </script>
    </body>
</html>
